Trevise: Tilgjengelighet i hierarkisk datanavigering

Trevisninger er essensielle UI-komponenter for å vise hierarkiske data. De lar brukere navigere i komplekse strukturer, som filsystemer, organisasjonskart eller nettstedsmenyer, på en intuitiv måte. En dårlig implementert trevisning kan imidlertid skape betydelige tilgjengelighetsbarrierer, spesielt for brukere med nedsatt funksjonsevne som er avhengige av hjelpemiddelteknologier som skjermlesere og tastaturnavigasjon. Denne artikkelen gir en omfattende guide til å designe og implementere tilgjengelige trevisninger, for å sikre en positiv brukeropplevelse for alle.

Forstå strukturen i en trevisning

En trevisning presenterer data i et hierarkisk, utvidbart/sammenleggbart format. Hver node i treet kan ha underliggende noder (barn), noe som skaper grener og undergrener. Den øverste noden kalles rotnoden. Å forstå den grunnleggende strukturen er avgjørende før man dykker ned i tilgjengelighetshensyn.

Her er en oversikt over vanlige elementer i en trevisning:

• Tre: Det overordnede elementet som inneholder hele trestrukturen.
• Treeitem (treelement): Representerer en enkelt node i treet. Det kan være en gren (utvidbar/sammenleggbar) eller et blad (ingen barn).
• Gruppe: (Valgfritt) En beholder som visuelt grupperer underliggende treelementer innenfor et overordnet treelement.
• Veksler/Visningsikon: En visuell indikator (f.eks. et pluss- eller minustegn, en pil) som lar brukere utvide eller slå sammen en gren.
• Etikett: Teksten som vises for hvert treelement.

Viktigheten av ARIA-roller og -attributter

Accessible Rich Internet Applications (ARIA) er en pakke med attributter som gir semantisk betydning til HTML-elementer, noe som gjør dem forståelige for hjelpemiddelteknologier. Når man bygger trevisninger, er ARIA-roller og -attributter avgjørende for å kommunisere treets struktur og oppførsel til skjermlesere.

Essensielle ARIA-roller:

• role="tree": Brukes på beholder-elementet som representerer hele treet. Dette informerer hjelpemiddelteknologier om at elementet inneholder en hierarkisk liste.
• role="treeitem": Brukes på hver node i treet. Dette identifiserer hver node som et element i treet.
• role="group": Brukes på beholder-elementet som visuelt grupperer underliggende treelementer. Selv om det ikke alltid er nødvendig, kan det forbedre semantikken.

Viktige ARIA-attributter:

• aria-expanded="true|false": Brukes på treelementer som har barn. Indikerer om grenen er utvidet (true) eller slått sammen (false). Dette attributtet må oppdateres dynamisk med JavaScript når brukeren utvider eller slår sammen noden.
• aria-selected="true|false": Brukes på treelementer for å indikere om noden er valgt. Kun én node bør være valgt om gangen (med mindre applikasjonen din krever flervalg, i så fall brukes aria-multiselectable="true" på elementet med role="tree").
• aria-label="[etikett-tekst]" eller aria-labelledby="[ID til etikett-element]": Gir en beskrivende etikett for treet eller individuelle treelementer. Bruk aria-label hvis etiketten ikke er visuelt til stede; ellers, bruk aria-labelledby for å koble treelementet til sin visuelle etikett.
• tabindex="0": Brukes på det treelementet som har fokus i utgangspunktet (vanligvis det første). Bruk tabindex="-1" på alle andre treelementer til de får fokus (f.eks. gjennom tastaturnavigasjon). Dette sikrer riktig flyt i tastaturnavigasjonen.

Eksempel på ARIA-implementering:

Her er et grunnleggende eksempel på hvordan man kan strukturere en trevisning med ARIA-attributter:

<ul role="tree" aria-label="Filsystem"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Rotmappe</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Mappe 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fil 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fil 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Mappe 2</span></li> </ul> </li> </ul>

Tastaturnavigasjon

Tastaturnavigasjon er avgjørende for brukere som ikke kan bruke mus. En godt utformet trevisning skal være fullt navigerbar kun ved hjelp av tastaturet. Her er standard tastaturinteraksjoner:

• Pil opp: Flytter fokus til forrige node i treet.
• Pil ned: Flytter fokus til neste node i treet.
• Pil venstre:
  • Hvis noden er utvidet, slås noden sammen.
  • Hvis noden er slått sammen eller ikke har barn, flyttes fokus til nodens overordnede node (forelder).
• Pil høyre:
  • Hvis noden er slått sammen, utvides noden.
  • Hvis noden er utvidet, flyttes fokus til det første barnet.
• Home: Flytter fokus til den første noden i treet.
• End: Flytter fokus til den siste synlige noden i treet.
• Mellomromstast eller Enter: Velger den fokuserte noden (hvis valg er støttet).
• Skriving (en bokstav eller et tall): Flytter fokus til neste node som starter med det skrevne tegnet. Fortsetter søket med hvert påfølgende tastetrykk.
• Pluss (+): Utvider den fokuserte noden (tilsvarer Pil høyre når den er slått sammen).
• Minus (-): Slår sammen den fokuserte noden (tilsvarer Pil venstre når den er utvidet).
• Stjerne (*): Utvider alle noder på det nåværende nivået (ikke universelt støttet, men ofte nyttig).

JavaScript-implementering for tastaturnavigasjon:

Du trenger JavaScript for å håndtere tastaturhendelser og oppdatere fokus deretter. Her er et forenklet eksempel:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Forhindre at siden ruller // Logikk for å finne forrige treelement (krever traversering av DOM) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Logikk for å finne neste treelement // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Slå sammen noden focusedElement.setAttribute('aria-expanded', 'false'); } else { // Flytt fokus til forelderen nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Utvid noden focusedElement.setAttribute('aria-expanded', 'true'); } else { // Flytt fokus til det første barnet nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Mellomromstast case 'Enter': event.preventDefault(); // Logikk for å velge den fokuserte noden selectNode(focusedElement); break; default: // Håndter skriving av tegn for å navigere til noder som starter med det tegnet break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Viktige hensyn for implementering av tastaturnavigasjon:

• Fokushåndtering: Sørg alltid for at bare ett treelement har tabindex="0" om gangen. Når du flytter fokus, må du oppdatere tabindex-attributtene tilsvarende.
• DOM-traversering: Traverser DOM-en effektivt for å finne neste og forrige treelementer, overordnede noder og underliggende noder. Vurder å bruke hjelpefunksjoner for å forenkle denne prosessen.
• Hendelsesforebygging: Bruk event.preventDefault() for å forhindre at nettleseren utfører standardhandlinger (f.eks. rulling) når du håndterer piltastene.
• Tegn-skriving: Implementer logikk for å håndtere skriving av tegn, slik at brukere raskt kan navigere til noder som starter med et spesifikt tegn. Lagre tidspunktet for siste tastetrykk for å avgjøre når søkestrengen skal tømmes.

Visuelt design og tilgjengelighet

Visuelt design spiller en avgjørende rolle for brukervennligheten og tilgjengeligheten til trevisninger. Her er noen retningslinjer:

• Tydelig visuelt hierarki: Bruk innrykk og visuelle ledetråder (f.eks. forskjellige ikoner for mapper og filer) for å tydelig indikere hierarkiet i treet.
• Tilstrekkelig fargekontrast: Sørg for tilstrekkelig fargekontrast mellom tekst og bakgrunn, og mellom forskjellige elementer i trevisningen. Bruk verktøy som WebAIM Contrast Checker for å verifisere kontrastforhold.
• Fokusmarkering: Gi en klar og synlig fokusmarkering for det treelementet som er i fokus. Dette er essensielt for tastaturbrukere. Ikke stol utelukkende på farge; vurder å bruke en kantlinje, omriss eller en endring i bakgrunnsfarge.
• Indikatorer for utviding/sammenlegging: Bruk klare og forståelige ikoner for indikatorer for utviding/sammenlegging (f.eks. pluss/minus-tegn, piler). Sørg for at disse ikonene har tilstrekkelig kontrast og er store nok til å være lette å klikke på.
• Unngå å bruke kun farge for å formidle informasjon: Ikke stol utelukkende på farge for å indikere tilstanden til et treelement (f.eks. valgt, utvidet, feil). Gi alternative visuelle ledetråder, som tekstetiketter eller ikoner.

Hensyn til skjermlesere

Skjermleserbrukere er avhengige av ARIA-attributter og tastaturnavigasjon for å forstå og samhandle med trevisninger. Her er noen viktige hensyn for skjermlesertilgjengelighet:

• Beskrivende etiketter: Bruk aria-label eller aria-labelledby for å gi beskrivende etiketter for treet og individuelle treelementer. Disse etikettene skal være konsise og informative.
• Tilstandsopplesing: Sørg for at tilstandsendringer (f.eks. utviding/sammenlegging av en node, valg av en node) blir riktig annonsert av skjermleseren. Dette oppnås ved å oppdatere aria-expanded- og aria-selected-attributtene korrekt.
• Hierarkiopplesing: Skjermlesere bør lese opp nivået til hver node i hierarkiet (f.eks. "Nivå 2, Mappe 1"). Dette håndteres automatisk av de fleste skjermlesere når ARIA-roller er implementert riktig.
• Konsistent tastaturnavigasjon: Sørg for at tastaturnavigasjonen er konsistent og forutsigbar på tvers av ulike nettlesere og skjermlesere. Test trevisningen din med flere skjermlesere (f.eks. NVDA, JAWS, VoiceOver) for å identifisere og løse eventuelle inkonsistenser.
• Progressiv forbedring: Hvis JavaScript er deaktivert, bør trevisningen fortsatt være tilgjengelig, om enn i en nedgradert tilstand. Vurder å bruke semantisk HTML (f.eks. nestede lister) for å gi et grunnleggende nivå av tilgjengelighet selv uten JavaScript.

Nettleserkompatibilitet

Tilgjengelighet bør være konsistent på tvers av forskjellige nettlesere og operativsystemer. Test trevisningen din grundig på følgende:

• Skrivebordsnettlesere: Chrome, Firefox, Safari, Edge
• Mobile nettlesere: Chrome (Android og iOS), Safari (iOS)
• Operativsystemer: Windows, macOS, Linux, Android, iOS
• Skjermlesere: NVDA (Windows), JAWS (Windows), VoiceOver (macOS og iOS)

Bruk nettleserens utviklerverktøy for å inspisere ARIA-attributter og tastaturoppførsel. Vær oppmerksom på eventuelle inkonsistenser eller gjengivelsesproblemer.

Testing og validering

Regelmessig testing er essensielt for å sikre tilgjengeligheten til trevisningen din. Her er noen testmetoder:

• Manuell testing: Bruk en skjermleser og tastatur for å navigere i trevisningen og verifisere at alle funksjoner er tilgjengelige.
• Automatisert testing: Bruk verktøy for tilgjengelighetstesting (f.eks. axe DevTools, WAVE) for å identifisere potensielle tilgjengelighetsproblemer.
• Brukertesting: Involver brukere med nedsatt funksjonsevne i testprosessen for å få reell tilbakemelding på tilgjengeligheten til trevisningen din.
• WCAG-samsvar: Sikt mot å oppfylle Web Content Accessibility Guidelines (WCAG) 2.1 Nivå AA. WCAG gir et sett med internasjonalt anerkjente retningslinjer for å gjøre nettinnhold mer tilgjengelig.

Beste praksis for tilgjengelige trevisninger

Her er noen beste praksiser du bør følge når du designer og implementerer tilgjengelige trevisninger:

• Start med semantisk HTML: Bruk semantiske HTML-elementer (f.eks. <ul>, <li>) for å lage den grunnleggende strukturen i trevisningen.
• Bruk ARIA-roller og -attributter: Bruk ARIA-roller og -attributter for å legge til semantisk betydning og gi informasjon til hjelpemiddelteknologier.
• Implementer robust tastaturnavigasjon: Sørg for at trevisningen er fullt navigerbar kun ved hjelp av tastaturet.
• Gi tydelige visuelle ledetråder: Bruk visuelt design for å tydelig indikere hierarkiet, tilstanden og fokuset i trevisningen.
• Test med skjermlesere: Test trevisningen med flere skjermlesere for å verifisere at den er tilgjengelig for skjermleserbrukere.
• Valider WCAG-samsvar: Valider trevisningen mot WCAG-retningslinjene for å sikre at den oppfyller tilgjengelighetsstandarder.
• Dokumenter koden din: Dokumenter koden din tydelig, og forklar formålet med hvert ARIA-attributt og hver hendelsesbehandler for tastatur.
• Bruk et bibliotek eller rammeverk (med forsiktighet): Vurder å bruke en ferdiglaget trevisningskomponent fra et anerkjent UI-bibliotek eller rammeverk. Gå imidlertid nøye gjennom komponentens tilgjengelighetsfunksjoner og sørg for at den oppfyller dine krav. Test alltid grundig!

Avanserte hensyn

• Lazy Loading (lat innlasting): For veldig store trær, implementer "lazy loading" for å laste noder kun når de trengs. Dette kan forbedre ytelsen og redusere den opprinnelige lastetiden. Sørg for at "lazy loading" implementeres på en tilgjengelig måte, og gi passende tilbakemelding til brukeren mens noder lastes. Bruk ARIA live-regioner for å annonsere lastestatusen.
• Dra og slipp: Hvis trevisningen din støtter dra-og-slipp-funksjonalitet, sørg for at den også er tilgjengelig for tastaturbrukere og skjermleserbrukere. Tilby alternative tastaturkommandoer for å dra og slippe noder.
• Kontekstmenyer: Hvis trevisningen din inkluderer kontekstmenyer, sørg for at de er tilgjengelige for tastaturbrukere og skjermleserbrukere. Bruk ARIA-attributter for å identifisere kontekstmenyen og dens alternativer.
• Globalisering og lokalisering: Design trevisningen din slik at den enkelt kan lokaliseres for forskjellige språk og kulturer. Vurder virkningen av forskjellige tekstretninger (f.eks. fra høyre til venstre) på det visuelle oppsettet og tastaturnavigasjonen.

Konklusjon

Å lage tilgjengelige trevisninger krever nøye planlegging og implementering. Ved å følge retningslinjene i denne artikkelen, kan du sikre at trevisningene dine er brukbare og tilgjengelige for alle brukere, inkludert de med nedsatt funksjonsevne. Husk at tilgjengelighet ikke bare er et teknisk krav; det er et grunnleggende prinsipp for inkluderende design.

Ved å prioritere tilgjengelighet kan du skape en bedre brukeropplevelse for alle, uavhengig av deres evner. Regelmessig testing og validering av koden din er viktig. Hold deg oppdatert med de nyeste tilgjengelighetsstandardene og beste praksis for å skape virkelig inkluderende brukergrensesnitt.